<template>
	<div class="diglog-info streetEdit projectDialog">
		<el-dialog title="编辑" :visible.sync="dialogVisible" size='small'>
			<el-tabs v-model="activeName" @tab-click="changeTab">
				<el-tab-pane label="项目进展情况" name="progress">
					<div class="clearfix search-header">
						<div style="height:65px;padding:5px 0px 0px 0px;margin-bottom:18px;float:right">
							<el-button @click="nenwProgress" style="float:right;width:120px">新增</el-button>
						</div>
					</div>
					<el-table :data="progressData" style="width: 100%">
						<el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="content" label="项目进展情况" show-overflow-tooltip>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="150">
							<template scope="row">
								<el-button @click="deleteProgress(row)" type="text" size="small">
									删除
								</el-button>
								<el-button @click="editProgress(row)" type="text" size="small">
									修改
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="存在问题和困难" name="problem">
					<div class="clearfix search-header">
						<div style="height:65px;padding:5px 0px 0px 0px;margin-bottom:18px;float:right">
							<el-button @click="nenwProblem" style="float:right;width:120px">新增</el-button>
						</div>
					</div>
					<el-table :data="problemData" style="width: 100%">
						<el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="content" label="存在问题和困难" show-overflow-tooltip>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="150">
							<template scope="row">
								<el-button @click="deleteProblem(row)" type="text" size="small">
									删除
								</el-button>
								<el-button @click="editProblem(row)" type="text" size="small">
									修改
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="下一步工作措施" name="measure">
					<div class="clearfix search-header">
						<div style="height:65px;padding:5px 0px 0px 0px;margin-bottom:18px;float:right">
							<el-button @click="nenwMeasures" style="float:right;width:120px">新增</el-button>
						</div>
					</div>
					<el-table :data="measuresData" style="width: 100%">
						<el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="content" label="下一步工作措施" show-overflow-tooltip>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="150">
							<template scope="row">
								<el-button @click="deletePromeasure(row)" type="text" size="small">
									删除
								</el-button>
								<el-button @click="editPromeasure(row)" type="text" size="small">
									修改
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>

		<edit-detail v-if="showEdit" :operateType="operateType" :showDialogId="showDialogId" :editData="editData" :showDialog.sync="showEdit"></edit-detail>
	</div>
</template>
<script>
	import editDetail from '../../Project/projectprogressDialog/Form.vue'

	export default {
		components: {
			editDetail
		},
		props: ['showDialogId'],
		created() {
			this.ajax({
				url: 'tProjectMeasures/selectPageByPid',
				data: {
					Pid: this.showDialogId
				}
			}).then(data => {
				this.measuresData = data.records
			})
			this.ajax({
				url: 'tProjectProblem/selectPageByPid',
				data: {
					Pid: this.showDialogId
				}
			}).then(data => {
				this.problemData = data.records
			})
			this.ajax({
				url: 'tProjectProgress/selectPageByPid',
				data: {
					Pid: this.showDialogId
				}
			}).then(data => {
				this.progressData = data.records
			})
		},
		mounted() {

		},
		watch: {
			dialogVisible(val) {
				this.$emit('update:showDialog', val)
			}
		},
		data() {
			return {
				progressData: [],
				problemData: [],
				measuresData: [],
				showEdit: false,
				operateType: 0, //操作类型
				editData:null,
				dialogVisible: true, //弹出框隐藏显示
				options: [],
				value: '',
				dataAll: {},
				areaList: [],
				rules: {
					name: [{
						required: true,
						message: '街道名称不能为空',
						trigger: 'blur'
					}],
					areaId: [{
						required: true,
						message: '所属区域不能为空',
						trigger: 'blur'
					}]
				},
				activeName: 'progress'
			}
		},
		methods: {
			Refresh() {
				this.ajax({
					url: 'tProjectMeasures/selectPageByPid',
					data: {
						Pid: this.showDialogId
					}
				}).then(data => {
					this.measuresData = data.records
				})
				this.ajax({
					url: 'tProjectProblem/selectPageByPid',
					data: {
						Pid: this.showDialogId
					}
				}).then(data => {
					this.problemData = data.records
				})
				this.ajax({
					url: 'tProjectProgress/selectPageByPid',
					data: {
						Pid: this.showDialogId
					}
				}).then(data => {
					this.progressData = data.records
				})
			},
			nenwProgress() {
				this.operateType = 0;
				this.showEdit = true;
			},
			nenwProblem() {
				this.operateType = 1;
				this.showEdit = true;
			},
			nenwMeasures() {
				this.operateType = 2;
				this.showEdit = true;
			},
			editProgress(selectedRow) {
				this.ajax({
                    url: 'tProjectProgress/selectProjectProgressById?id=' + selectedRow.row.id,
                    success: function(data) {
                        this.editData = data;
                    }
                })
				this.operateType = 0;
				this.showEdit = true;
			},
			editProblem(selectedRow) {
				this.ajax({
                    url: 'tProjectProblem/selectProjectProblemById?id=' + selectedRow.row.id,
                    success: function(data) {
                        this.editData = data;
                    }
                })
				this.operateType = 1;
				this.showEdit = true;
			},
			editPromeasure(selectedRow) {
				this.ajax({
                    url: 'tProjectMeasures/selectProjectMeasuresById?id=' + selectedRow.row.id,
                    success: function(data) {
                        this.editData = data;
                    }
                })
				this.operateType = 2;
				this.showEdit = true;
			},
			deleteProgress(selectedRow) {
				this.$confirm('是否删除数据？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.ajax({
						url: 'tProjectProgress/deleteProjectProgress',
						type: 'post',
						data: {
							id: selectedRow.row.id
						},
						success: function(data) {
							this.Refresh();
						}
					});
				}).catch(() => {

				});
			},
			deleteProblem(selectedRow) {
				this.$confirm('是否删除数据？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.ajax({
						url: 'tProjectProblem/deleteProjectProblem',
						type: 'post',
						data: {
							id: selectedRow.row.id
						},
						success: function(data) {
							this.Refresh();
						}
					});
				}).catch(() => {

				});
			},
			deletePromeasure(selectedRow) {
				this.$confirm('是否删除数据？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.ajax({
						url: 'tProjectMeasures/deleteProjectMeasures',
						type: 'post',
						data: {
							id: selectedRow.row.id
						},
						success: function(data) {
							this.Refresh();
						}
					});
				}).catch(() => {

				});
			},
			/*点击标签切换*/
			changeTab(e) {
				//				if(e.name == 'problem') {
				//
				//				} else if(e.name = "measure") {
				//
				//				}
			}
		}
	}
</script>
<style lang="less">
	.streetEdit .el-form-item__error {
		top: 35px;
		left: 100px;
	}
	
	.streetEdit .el-form-item {
		min-height: 50px;
		margin-bottom: 5px;
	}
</style>
<style scoped lang="less">
	.zui-noFloat .el-col {
		float: none;
		display: inline-block;
		margin-right: -4px;
		vertical-align: top;
	}
	
	.projectDialog .desc-input {
		width: 70%;
		float: left;
	}
</style>